<style>
    html,body{height:100%}
    .console-page{padding: 0!important;}
    .console-page, .container,.weui-flex,.page ,.bg-blur-white,.bc-tab-content,.promotion-wrap{height: 100%;overflow: hidden;}
    /*.container{width: 100%;}*/
    .promotion-wrap{display: flex;}
    .promotion-tab{width: 140px;height: 100%;background-color: #f1f1f1;}
    .promotion-tab .selected{ background-color: cornflowerblue; color: white !important;}
    .promotion-tab .promotion-tab-item a{font-weight: normal;color: #555 ;line-height: 36px;text-align: left;display: block;width: 115px;height: 36px;padding: 0 0 0 25px;  }
    .promotion-main{flex: 1;background-color: #FFF; padding: 16px 1% 0 1%;text-align: left; overflow: hidden;}
    .promotion-header .title{background-color: #FFF;color: #333;white-space: nowrap; display: block; border-bottom: solid 1px #C8C8C8; position: relative; z-index: 4; height: 30px;}
    .title h3{font-size: 16px;color: #333; margin-right: 6px;display: inline-block;}
    .title h5{font-size: 12px;font-weight: normal;line-height: 24px; color: #777; vertical-align: bottom; letter-spacing: normal; display: inline-block; padding: 0;}
    /**/
    .border{border-right: 1px solid #ddd; text-align: center;}
    .border-r{border-right: 1px solid #ddd;text-align: center; font-size: 12px; padding: 5px;}
    .border-1px{border-top: 1px solid #ddd; border-bottom: 1px solid #ddd}
    .tabel-title{background-color: #F5F5F5; overflow: hidden; font-size: 14px;}
    .btn{border: 1px solid #ddd; display: inline-block; padding: 0 15px; background-color: #1aad19; color: white; font-size: 10px; border-radius: 10px;}
    .btn:hover{background-color: #179b16}
</style>
<div class="promotion-wrap">
    <div class="promotion-tab">
        <div class="promotion-tab-item">
            <a class="selected" href="javascript:void(0)">折扣管理</a>
        </div>
        <div class="promotion-tab-item">
            <a href="javascript:void(0)">满减管理</a>
        </div>
        <div class="promotion-tab-item">
            <a href="javascript:void(0)">抵扣卷管理</a>
        </div>
    </div>
    <div class="promotion-main">
        <div class="promotion-content">
            <div class="promotion-header">
                <div class="title">
                    <h3>折扣管理</h3>
                    <h5>(共*条记录)</h5>
                </div>
            </div>
            <!--表格头部开始-->
            <div class="weui-cells">
                <div class="weui-cell tabel-title">
                    <div class="weui-cell__bd border">活动名称</div>
                    <div class="weui-cell__bd border">活动类型</div>
                    <div class="weui-cell__bd border">适用范围</div>
                    <div class="weui-cell__bd border">开始时间</div>
                    <div class="weui-cell__bd border">结束时间</div>
                    <div class="weui-cell__bd border">操作</div>
                </div>
                <div class="">
                    <a href="/console/pormotion_add" class="add weui-btn weui-btn_mini weui-btn_primary">增加活动</a>
                </div>
                <div class="weui-cell border-1px">
                    <div class="weui-cell__bd border-r">订单满300送代金券30元</div>
                    <div class="weui-cell__bd border-r">满额送优惠券</div>
                    <div class="weui-cell__bd border-r">重卡</div>
                    <div class="weui-cell__bd border-r">2016-05-21</div>
                    <div class="weui-cell__bd border-r">2019-05-01</div>
                    <div class="weui-cell__bd border-r">
                        <a href="javascript:void (0)" class="btn">编辑</a>
                        <a href="javascript:void (0)" class="btn">删除</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>